<template>
    <div class="product-detail">
        <!-- 商品图片区域 -->
        <div class="product-images">
<!--            <img :src="product.product_img" :alt="product.product_name" class="product-image" />-->
            <el-image :src="baseUrl+product.productImg" alt="User Avatar" class="product-image"></el-image>
        </div>
        <!-- 商品信息区域 -->
        <div class="product-info">
            <!--  商铺名称       -->
            <div class="shop-name" @click="goToShopPage">{{ shopIdFormatter(product,null,product.shopId,null) }}</div>
            <!-- 商品名称 -->
            <h1 class="product-title">{{ product.productName }}</h1>
            <!-- 月销量 -->
            <p class="product-sales">月销:500+</p>
            <!-- 库存 -->
            <p class="product-stock"> 剩余: {{ product.stock }}</p>
            <!-- 商品价格区域 -->
            <div class="product-price">
                <span class="price-label">价格:</span>
                <span class="price-value">￥{{ product.price }}</span>
                <!-- 折扣信息 -->
                <p class="discount" style="color: red"> 折扣:
                    <span class="discount-percent" > 满2件减10 满3件减15</span>
                </p>
            </div>
            <!-- 数量控制区域 -->
            <div class="quantity-control">
                <span class="quantity-label">数量:</span>
                <el-input-number v-model="quantity" :min="1" :max="product.stock" label="数量"></el-input-number>
            </div>
            <!-- 加入购物车按钮 -->
            <el-button type="" class="add-to-cart-button" @click="addToCart"><el-icon><ShoppingCart /></el-icon>加入购物车</el-button>
        </div>
        <!--      在右侧有一个卡片显示该的商品评论-->
        <el-card class="box-card" >
            <div slot="header" class="clearfix">
                <span><el-icon><ChatDotSquare /></el-icon>评论</span>
            </div>
            <div v-for="comment in comments" :key="comment.id">
                <div class="comment-content">
                    <span class="comment-author"><el-icon><User /></el-icon>{{ userIdFormatter(comment,null,comment.userId,null) }}:</span>
                    <span class="comment-text">{{ comment.reviewContent }}</span>
                    <span class="comment-time">{{ comment.reviewDate }}</span>
                    <div class="comment-score">
                        <span class="score-label">评分:</span>
                        <span class="score-value">{{ comment.score }}</span>
                    </div>
                </div>
            </div>
        </el-card>
        <!--        新增评论-->
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import router from "@/router";
import {ElMessage} from "element-plus";
import qs from "qs";

const baseUrl = getBaseUrl();
// 获取路由参数
var urlParams = new URLSearchParams(window.location.search)
var productId = urlParams.get('id');

// 商品详情数据
const product = ref({
    id: productId,
    // shop_name: '精品肉店',
    // product_img: '/image/login/product/pig.png',
    // product_name: '精选猪肉',
    // shopId: '111',
    // stock: '100',
    // price: 10,
});

// 加载商品详情数据
onMounted(() => {
    fetchProductDetails();
    loadComments();
})

/**
 * 获取商品详情
 */
const fetchProductDetails = () => {
    axios.get(BASE_URL + '/v1/product/selectProduct/'+productId)
        .then((response) => {
            if (response.data.code === 2000) {
                product.value = response.data.data;
            } else {
                ElMessage.error(response.data.msg);
            }
        })
};

// 获取userid
const user = ref(getUser());
const quantity = ref(1);

//formater 用户id转换为用户名
const userIdFormatter = (row, column, cellValue, index) => {
    if (cellValue==101){
        return 'user1';
    }else if (cellValue == 102){
        return 'user2';
    }else if (cellValue == 103){
        return 'user3';
    }
    return cellValue;
};
//formatter 商铺id转换为商铺名
const shopIdFormatter = (row, column, cellValue, index) => {
    if (cellValue==101){
        return '达达菜场';
    }else if (cellValue==102){
        return '人间美味';
    }else{
        return cellValue;
    }
};

/**
 * 加入购物车
 */
const addToCart = () => {
    let data1 = {
        userId: user.value.id,
        shopId: product.value.shopId,
        productId: productId,
        quantity: quantity.value,
    };
    let data = qs.stringify(data1);
    console.log("购物车", data);
    axios.post(BASE_URL + "/v1/cart/addProducts/", data)
        .then((response) => {
            if (response.data.code === 2000) {
                ElMessage.success('添加成功');
                // router.push('/cart');
            } else {
                ElMessage.error(response.data.msg);
            }
        })
    console.log('商品已加入购物车:', product.value);
};

// 评论
const comments = ref([
    { id: 101, user_id: 101, user_name: '张三', content: '好吃', create_time: '2023-05-05', score: 5 },
    { id: 102, user_id: 102,user_name: '李四', content: '太贵了', create_time: '2023-05-06', score: 1 },
]);

const loadComments = () => {
    axios.get(BASE_URL + '/v1/productReview/selectComment/' + productId)
        .then((response) => {
            if (response.data.code === 2000) {
                comments.value = response.data.data;
            } else {
                ElMessage.error(response.data.msg);
            }
        })
};


/**
 * 跳转到店铺页面
 */
const goToShopPage = () => {
    router.push('shopDetail?id='+product.value.shopId);
};
</script>

<style scoped>
/* 商品详情页面样式 */
.product-detail {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 20px;
}

/* 商品图片区域样式 */
.product-images {
    margin-right: 20px;
}

/* 商品图片样式 */
.product-image {
    width: 300px;
    height: 300px;
    object-fit: cover;
    border-radius: 8px;
}

/* 商品信息区域样式 */
.product-info {
    max-width: 500px;
}

/* 商品名称样式 */
.product-title {
    font-size: 24px;
    margin-bottom: 10px;
}

/* 月销量样式 */
.product-sales {
    font-size: 14px;
    color: #999;
    margin-bottom: 10px;
}

/* 商品价格区域样式 */
.product-price {
    margin-bottom: 20px;
    background-color: #cccccc;
}

/* 价格标签样式 */
.price-label {
    font-size: 18px;
    color: #333;
    margin-right: 10px;
}

/* 价格数值样式 */
.price-value {
    font-size: 24px;
    color: #ff5722;
    font-weight: bold;
}

/* 数量控制区域样式 */
.quantity-control {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

/* 数量标签样式 */
.quantity-label {
    font-size: 15px;
    color: #333;
    margin-right: 50px;
}

/* 加入购物车按钮样式 */
.add-to-cart-button {
    width: 150px;
    height: 40px;
    border-radius: 5px;
    background-color: red;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
}

/* 折扣信息样式 */
.discount {
    margin-top: 10px;
}

/* 折扣百分比样式 */
.discount-percent {
    color: #777777;
}

.box-card {
    width: 30%;
    /*    靠最右侧*/
    margin-left: 100px;
    float: right;
}

.comment-content {
    margin-top: 15px;
}

.comment-author {
    font-size: 14px;
    color: #999;
    margin-right: 10px;
}

.comment-text {
    font-size: 14px;
    color: #333;
    margin-right: 10px;
}

.comment-time {
    font-size: 14px;
    color: #999;
}

/* 评分 */
.score-label {
    font-size: 14px;
    color: #999;
    margin-right: 10px;
}

/* 店铺名称样式 */
.shop-name {
    font-size: 18px;
    color: #333;
    cursor: pointer;
    text-decoration: underline;
}
</style>
